<template>
  <el-container class="login-image">
    <!--<el-container>-->
    <!--<el-aside>-->
    <!--<div>-->
    <!--<img src="@/assets/login/nation_logo.png" alt="">-->
    <!--<p>平桥区网格化服务管理平台</p>-->
    <!--</div>-->
    <!--</el-aside>-->
    <!--<el-main>-->
    <!--<el-form :model="loginInfo" :label-position="labelPosition" label-width="13%" class="loginClass">-->
    <!--<el-form-item label="用户名：">-->
    <!--<el-input v-model="loginInfo.username" ref="username" placeholder="请输入用户名" class="inpt-mid-size" @keyup.enter.native="loginByLoginEvt"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="密码：">-->
    <!--<el-input v-model="loginInfo.password" ref="password" type="password" placeholder="请输入用密码" class="inpt-mid-size" @keyup.enter.native="loginByLoginEvt"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="验证码：">-->
    <!--<el-input v-model="loginInfo.code" ref="code" placeholder="请输入用验证码" class="inpt-mid-size" @keyup.enter.native="loginByLoginEvt"></el-input>-->
    <!--<img :src="imgStr" alt="" class="yzCode" @click="getCode">-->
    <!--<el-button type="primary" @click="getCode">刷新</el-button>-->
    <!--</el-form-item>-->
    <!--<el-form-item>-->
    <!--<el-button type="primary" @click="loginFun">登录</el-button>-->
    <!--</el-form-item>-->
    <!--</el-form>-->
    <!--</el-main>-->
    <!--<div class="erweima">-->
    <!--<div class="er">-->
    <!--<img src="@/assets/login/ewm1.png" alt="">-->
    <!--<span>平桥政法公众号</span>-->
    <!--</div>-->
    <!--<div class="er">-->
    <!--<img src="@/assets/login/ewm2.png" alt="">-->
    <!--<span>网格通APP下载</span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</el-container>-->
    <!--<el-footer class="footer">-->
    <!--<ul>-->
    <!--<li>版权所有：平桥区政法委&nbsp;&nbsp;&nbsp;<a href="http://www.beian.miit.gov.cn" target="_blank">豫ICP备18025878号</a></li>-->
    <!--<li>开发运营：河南云信海网络技术有限公司</li>-->
    <!--&lt;!&ndash;<li>网格通APP下载</li>&ndash;&gt;-->
    <!--<li>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</el-footer>-->
    <div class="Main">
      <div class="main">
        <div class="mainLeft">
          <div class="logo">
            <img src="@/assets/login/nation_logo.png">
          </div>
          <div class="headline">
            <!--<img src="@/assets/login/headline.png" alt="">-->
            <span class="headlineTitle">平桥区网格化服务管理平台</span><br>
            <span class="enTitle">PINGQIAOQUWANGGEHUAFUWUGUANLIPINGTAI</span>
          </div>
          <div class="quickMark">
            <div class="bjnews">
              <img class="ewm1" src="@/assets/login/ewm1.png" alt="">
              <img src="@/assets/login/zf.png" style="width: 20px;height: 18px;position: relative;top: 25%;" alt="">&nbsp;平桥区政法公众号
            </div>
            <div class="app">
              <img class="ewm2" src="@/assets/login/ewm2.png" alt="">
              <img src="@/assets/login/wgt.png" style="width: 18px;height: 18px;position: relative;top: 25%;" alt="">&nbsp;网格通app下载
            </div>
          </div>
        </div>
        <div class="mainRight">
          <div class="login-box">
            <el-form :model="loginInfo" :label-position="labelPosition" class="loginClass">
              <el-form-item class="welcome">
                欢迎登录
              </el-form-item>
              <el-form-item>
                <div class="userName">
                  <img src="~@/assets/login/yhm.png" alt="">
                </div>
                <el-input v-model="loginInfo.username" ref="username" placeholder="请输入用户名" class="inpt-mid-size" @keyup.enter.native="loginByLoginEvt"></el-input>
              </el-form-item>
              <el-form-item>
                <div class="password">
                  <img src="~@/assets/login/mm.png" alt="">
                </div>
                <el-input v-model="loginInfo.password" ref="password" type="password" placeholder="请输入密码" class="inpt-mid-size" @keyup.enter.native="loginByLoginEvt"></el-input>
              </el-form-item>
              <el-form-item>
                <div class="verificationCode">
                  <img src="~@/assets/login/yzm.png" alt="">
                </div>
                <el-input v-model="loginInfo.code" ref="code" placeholder="请输入验证码" class="inpt-mid-size" @keyup.enter.native="loginByLoginEvt"></el-input>
                <img :src="imgStr" alt="" class="yzCode" @click="getCode">
                <!--<el-button type="primary" @click="getCode">刷新</el-button>-->
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loginFun" class="inpt-mid-size">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="bottom">
        版权所有：平桥区政法委&nbsp;&nbsp;&nbsp;备案号：<a href="http://www.beian.miit.gov.cn" target="_blank">豫ICP备18025878号-1</a>&nbsp;&nbsp;&nbsp;技术支持：河南云信海网络技术有限公司
      </div>
    </div>
  </el-container>
</template>

<script>
import {login, getCaptcha} from '@/http/AppApi'
import {setUserInfo, clearSessionStorage} from '@/utils/SessionDataUtil'
import {setToken, clearLocalStrorage} from '@/utils/LocalDataUtil'
import config from '@/config/index'
import {JSEncrypt} from 'jsencrypt'
import CookieUtil from '@/utils/CookieUtil'

export default {
  data () {
    return {
      login: '登录',
      labelPosition: 'right',
      imgStr: '',
      loginInfo: {
        username: '',
        password: '',
        code: ''
      },
      publicKey: null,
      primaryPwd: ''
    }
  },
  mounted () {
    this.getCode()
    this.$refs['username'].$el.querySelector('input').focus()
    this.getErrorCode()
  },
  components: {},
  methods: {
    loginByLoginEvt () {
      if (this.loginInfo.username === '' && this.loginInfo.password === '' && this.loginInfo.code === '') {
        return ''
      } else if (this.loginInfo.username !== '' && this.loginInfo.password === '' && this.loginInfo.code === '') {
        this.$message({
          type: 'warning',
          message: '请输入密码和验证码'
        })
        this.$refs['password'].$el.querySelector('input').focus()
        return ''
      } else if (this.loginInfo.username === '' && this.loginInfo.password !== '' && this.loginInfo.code === '') {
        this.$message({
          type: 'warning',
          message: '请输入用户名和验证码'
        })
        this.$refs['username'].$el.querySelector('input').focus()
        return ''
      } else if (this.loginInfo.username === '' && this.loginInfo.password === '' && this.loginInfo.code !== '') {
        this.$message({
          type: 'warning',
          message: '请输入用户名和密码'
        })
        this.$refs['username'].$el.querySelector('input').focus()
        return ''
      } else if (this.loginInfo.username !== '' && this.loginInfo.password !== '' && this.loginInfo.code === '') {
        this.$message({
          type: 'warning',
          message: '请输入验证码'
        })
        this.$refs['code'].$el.querySelector('input').focus()
        return ''
      } else if (this.loginInfo.username === '' && this.loginInfo.password !== '' && this.loginInfo.code !== '') {
        this.$message({
          type: 'warning',
          message: '请输入用户名'
        })
        this.$refs['username'].$el.querySelector('input').focus()
        return ''
      } else if (this.loginInfo.username !== '' && this.loginInfo.password === '' && this.loginInfo.code !== '') {
        this.$message({
          type: 'warning',
          message: '请输入密码'
        })
        this.$refs['password'].$el.querySelector('input').focus()
        return ''
      } else {
        this.loginFun(this.loginInfo)
      }
    },
    loginFun () {
      if (!this.beforeSubmit()) {
        return
      }
      login(this.loginInfo).then(resp => {
        if (resp && resp.code === '200') {
          let data = resp.data
          setToken(data.token)
          setUserInfo(data.userInfo)
          this.$router.push({ path: '/' })
        } else {
          this.getCode()
          // 清空密码
          this.loginInfo.password = this.primaryPwd
          this.loginInfo.code = ''
        }
      })
    },
    beforeSubmit () {
      let pwd = this.encryptorPassword()
      if (pwd) {
        this.primaryPwd = this.loginInfo.password
        this.loginInfo.password = pwd
        this.loginInfo.passwordEncryption = true
        return true
      } else {
        this.$message({
          message: '请填写密码!',
          type: 'warning'
        })
      }
      return false
    },
    getCode () {
      getCaptcha().then(resp => {
        if (resp && resp.code === '200') {
          this.imgStr = resp.data
        }
      })
    },
    getErrorCode () {
      let error = this.$route.params.error
      if (error) {
        if (error === 'Unauthorized') {
          this.$message({message: '登录失效，请重新登录!', type: 'error'})
        } else if (error === 'lougout') {
          this.$message({message: '退出成功', type: 'success'})
        }
      }
      CookieUtil.clearToken()
      clearSessionStorage()
      clearLocalStrorage()
    },
    encryptorPassword () {
      let pwd = this.loginInfo.password
      let publicKey = config.pk
      if (pwd && publicKey) {
        let encryptor = new JSEncrypt()
        encryptor.setPublicKey(publicKey)
        return encryptor.encrypt(pwd)
      }
      return null
    }
  }
}
</script>
<style scoped>
  .inpt-mid-size {
    width: 248px !important;
  }
  .el-main {
    width: 45% !important;
    padding: 0 0 0 50px;
    position: relative;
    overflow: hidden;
  }
  .el-main form {
    position: absolute;
    width: 524px;
    top: 188px;
    left: 40px;
  }
  .el-aside {
    width: 55% !important;
    color: white;
    font-size: 38px;
    font-weight: 600;
    padding-bottom: 24px;
    position: relative;
    overflow: hidden;
  }
  .el-aside div {
    display: flex;
    flex-flow: column;
    align-items: center;
    border-right: 2px solid white;
    width: 550px;
    position: absolute;
    top: 183px;
    right: 12px;
  }
  .el-aside img {
    width: 114px;
    height: 114px;
  }
  .el-aside p {
    padding: 0;
    margin-bottom: 0;
  }
  .login-image {
    background-image: url(../assets/login/login1.png);
    background-size: 100% 100%;
  }
  .el-footer {
    display: flex;
    justify-content: center;
  }
  .el-footer ul {
    color: white;
    list-style: none;
    padding: 0;
    font-size: 13px;
  }
  .el-footer ul li {
    text-align: left;
    line-height: 24px;
  }
  .loginClass >>> .el-form-item__label,
  .el-form >>> .el-form-item__label {
    color: #fff;
  }
  .yzCode {
    height: 25px;
    /*vertical-align: middle;*/
    position: absolute;
    top: 20%;
    right: 10%;
  }
  .Main{
    width: 100%;
    height: 100%;
  }
  .main{
    width: 100%;
    height: 100%;
    margin-top: 10%;
    display: flex;
    justify-content: center;
  }
  .mainLeft,.mainRight{
    width: 31%;
    height: 50%;
  }
  .logo{
    width: 100%;
    text-align: center;
  }
  .logo img{
    width: 100px;
  }
  .headline{
    text-align: center;
    margin-top: 5%;
  }
  .headline img{
    width: 350px;
  }
  .bjnews,.app{
    width: 140px;
    height: 35px;
    background: #3057c7;
    border-radius: 5px;
    margin: 0px 10px;
    text-align: center;
    line-height: 35px;
    font-size: 13px;
    cursor:pointer
  }
  .quickMark{
    display: flex;
    justify-content: center;
    margin-top: 7%;
    color: white;
    font-size: 14px;
  }
  .login-box{
    width: 300px;
    height: 350px;
    background-image: url(../assets/login/dly.png);
    background-size: 100%;
  }
  .mainRight{
    display: flex;
    justify-content: center;
  }
  .el-form-item{
    margin-bottom: 7%;
    text-align: center;
  }
  .welcome{
    font-size: 14px;
    margin-top: 2%;
    color: #4084d5;
  }
  .el-form >>> .el-input__inner{
    background-color: #1e2982;
    border: 1px solid #3343c3;
    padding: 0 20px 0 35px;
    color: honeydew;
  }
  .loginClass{
    padding-top: 10%;
  }
  .bottom{
    position: absolute;
    bottom: 4%;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 14px;
  }
  .bottom a{
    text-decoration: none;
    color: white;
  }
  .bottom a:hover{
    color: #333333;
  }
  .userName,.password,.verificationCode{
    width: 28px;
    height: 28px;
    position: absolute;
    z-index: 1;
    top: 15%;
    left: 10%;
  }
  .bjnews,.app{
    position: relative;
    display: flex;
    justify-content: center;
  }
  .bjnews img.ewm1,.app img.ewm2{
    position: absolute;
    z-index: 99;
    top: 37px;
    left: 2px;
    /*right: 0px;*/
    width: 8.6rem;
    max-width: none;
    height: 8.6rem;
    transform: scale(0);
    transform-origin: top;
    opacity: 0;
    /*border: .3125rem solid #0085ba;*/
    /*border: 1px solid #3343c3;*/
    border-radius: .25rem;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  }
  .bjnews:hover img.ewm1,.app:hover img.ewm2 {
    transform: scale(1);
    opacity: 1;
  }
  .bjnews:hover,.app:hover{
    color: #333333;
  }
  .headlineTitle{
    font-size: 35px;
    /*color: white;*/
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    background: -webkit-linear-gradient(top, #f4f3fb, #9d9da5);     /* 背景色渐变 */
    -webkit-background-clip: text;         /* 规定背景的划分区域 */
    -webkit-text-fill-color: transparent;  /* 防止字体颜色覆盖 */
  }
  .enTitle{
    color: #a0cff0;
    font-size: 17px;
  }
</style>
